<!DOCTYPE html>
<html>
<head>
    <title>安全教育信息</title>
    {% include 'admin/common/header.html' %}

</head>

<body>
<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <div class="layui-form-inline">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off"
                                   placeholder="请输入标题"
                                   class="layui-input" value="{{article.title }}">
                        </div>
                    </div>

                </div>
             <input  name="article_id" type="hidden" class="layui-input" value="{{ article.article_id }}">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-form-block">
                        <div class="layui-upload-drag" id="test10">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将图片拖拽到此处</p>
                            <div {% if article.image == '' %} } class="layui-hide" {% endif %} id="uploadDemoView">
                                <hr>
                                <img src="{{ article.image }}" alt="上传成功后渲染" style="max-width: 196px">
                                <input id="image_input" name="image" type="hidden" class="layui-input" value="{{ article.image }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-form-block">
                        <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
                    </div>
                </div>
                <div class="layui-form-item  {% if article.video == '' %} }layui-hide{% endif %}" id="hides">
                    <label class="layui-form-label"></label>
                    <div class="layui-upload-drag">
                        <div  {% if article.video == '' %} } class="layui-hide" {% endif %} id="DemoVideo">
                            <hr>
                            <video src="{{ article.video }}" style="max-width: 196px" controls></video>
                            <input id="video_input" name="video" type="hidden" class="layui-input" value="{{ article.video }}">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-inline">
                        <label class="layui-form-label">发布时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="pub_time" id="date" lay-verify="datetime" placeholder="yyyy-MM-dd HH:mm:ss"
                                   autocomplete="off" class="layui-input" value="{{ article.pub_time }}">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否发布</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" lay-skin="switch"  {% if article.status == 1 %} } checked {% endif %}  lay_filter="switchStatus">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="introduction"   class="layui-textarea">{{article.introduction }}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <textarea id="demo"  class="layui-textarea" name="content"></textarea>
                </div>

            </div>
        </div>
    </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
{% include 'admin/common/footer.html' %}
<script>


    layui.use(['form', 'jquery', 'upload', 'tinymce', 'laydate'], function () {
        let form = layui.form, upload = layui.upload, tinymce = layui.tinymce, laydate = layui.laydate
        let $ = layui.jquery
        laydate.render({
            elem: '#date',
             format:'yyyy-MM-dd HH:mm:ss'
            , type: 'datetime'
        });
        var demo = tinymce.render({
            elem: "#demo",
            height: 400,
            images_upload_url:'{{ url_for('adminFile.upload_api') }}',
            file_picker_types: 'media',
            file_picker_callback: function (cb, value, meta) {
                if (meta.filetype == 'media') {
                    //创建一个隐藏的type=file的文件选择input
                    let input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.onchange = function () {
                        let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
                        let xhr, formData;
                        xhr = new XMLHttpRequest();
                        xhr.open('POST', '{{ url_for('adminFile.upload_video') }}');//自定义文件上传
                        xhr.withCredentials = true;
                        xhr.upload.onprogress = function (e) {
                            // 进度(e.loaded / e.total * 100)
                        };
                        xhr.onerror = function () {
                            console.log(xhr.status);
                            return;
                        };
                        xhr.onload = function () {
                            let json;
                            if (xhr.status < 200 || xhr.status >= 300) {
                                console.log('HTTP 错误: ' + xhr.status);
                                return;
                            }
                            json = JSON.parse(xhr.responseText);
                            console.log(json)
                            //接口返回的文件保存地址
                            let mediaLocation = json.data.src;
                            //cb()回调函数，将mediaLocation显示在弹框输入框中
                            cb(mediaLocation, {title: file.name});

                        };
                        formData = new FormData();
                        //假设接口接收参数为file,值为选中的文件
                        formData.append('file', file);
                        //正式使用将下面被注释的内容恢复
                        xhr.send(formData);
                    };
                    //触发点击
                    input.click();
                }
            }
        },(opt, edit) => {
            console.log('{{article.content }}')
            edit.setContent('{{article.content }}')
        });



        {#demo.getContent();#}
        {#layui.$('#demo').val(demo.getContent());#}
        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: '{{ url_for('adminFile.upload_api') }}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , exts: 'jpg|png|gif|bmp|jpeg'
            , size: 100000
            , done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                layui.$('#image_input').val(res.data.src);
                console.log(res)
            }
        });

        upload.render({
            elem: '#test5'
            , url: '{{ url_for('adminFile.upload_video') }}' //此处配置你自己的上传接口即可
            , accept: 'video' //视频
            , done: function (res) {
                layui.$('#hides').removeClass('layui-hide');
                layui.$('#DemoVideo').removeClass('layui-hide').find('video').attr('src', res.data.src);
                layui.$('#video_input').val(res.data.src);

                layer.msg('上传成功');
                console.log(res)
            }
        });
        form.on('submit(user-save)', function (data) {
           data.field.content=demo.getContent({ format: 'text' })
            $.ajax({
                url: '/admin/article/update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {

                            parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                            parent.layui.table.reload('user-table')
                        })
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000})
                    }
                }
            })
            return false
        })
    })

</script>
<script>
</script>
</body>
</html>